import React from 'react'

// 无状态组件
const TodoListUI = (props) => {
    const { inputValue, list, inputChange, handleClickBtn, handleDelData } = props;
    return (
        <div>
            <div>
                <input value={inputValue} onChange={inputChange} type="text" />
                <button type="button" onClick={handleClickBtn}>提交</button>
            </div>
            <div>
                <ul>
                    {
                        list.map((item, index) => {
                            return (
                                <li key={index} onClick={() => handleDelData(index)}>{item}</li>
                            )
                        })
                    }
                </ul>
            </div>
        </div>
    );
}

export default TodoListUI;